<template>
  <el-button type="primary" @click="showWindow">保存</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="姓名" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.username }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="性别" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.sex }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="年龄" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #reference>
            <el-tag>{{ scope.row.age }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-popconfirm title="是否删除?"
        confirm-button-text="确定"
        cancel-button-text="取消"
        @confirm="handleDelete(scope.row.id)"
        @cancel="cancelEvent"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2,4,6]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  <!-- 弹出窗体 -->
  <el-dialog v-model="dialogFormVisible" :title="form?.id?'更新':'保存'" draggable>
    <el-form :model="form">
      <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
      <el-select v-model="form.sex" class="m-2" placeholder="请选择" size="large">
      <el-option label="男" value="男"/>
      <el-option label="女" value="女"/>
      </el-select>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
      <el-input-number v-model="form.age" :min="1" :max="200" />
      </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="saveOrUpdate">
      {{form?.id?'更新':'保存'}}
      </el-button>
      </span>
      </template>
  </el-dialog>

</template>

<script setup>
import axios from 'axios';
import { ref,onMounted } from 'vue'
import { ElMessage } from 'element-plus'

//---------------分页---------------
const currentPage = ref(1)
const pageSize = ref(2)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)
const total = ref(0)
//当前显示的每页size
const handleSizeChange = (val) => {
  pageSize.value = val
  show()
}
const handleCurrentChange = (val) => {
  currentPage.value=val
  show()
}
//---------------------------------
//弹出窗体参数
const dialogFormVisible = ref(false)
//事件：调用窗体
const showWindow = () => {
  dialogFormVisible.value = true
}
//创建一个对象参数
const form = ref({age:1})
//保存
const savePerson = () => {
  axios.post('/api/person/save',form.value).then(res=>{
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    // 刷新页面
    show()
    // 关闭窗体
    dialogFormVisible.value = false
  })
}
//更新
const updatePerson = () => {
  axios.put('/api/person/update',form.value).then(res=>{
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    // 刷新页面
    show()
    // 关闭窗体
    dialogFormVisible.value = false
  })
}

//保存or更新
const saveOrUpdate = () => {
  if(form && form.value.id){
    updatePerson()
    form.value={age:1}
  }else{
    savePerson()
  }
}
//-----------------------------------------------------
//事件：编辑
const handleEdit = (row) => {
  dialogFormVisible.value=true
  form.value=row
}
const handleDelete = (id) => {
  axios.delete(`/api/person/delete/${id}`).then(res=>{
      ElMessage({
        message: '操作成功',
        type: 'success',
      })
      // 刷新页面
      show()
  })
}
const cancelEvent = () => {
  ElMessage({
    message: '您取消了删除操作',
    type: 'warning',
  })
}
//数据源
const tableData = ref([])

//获取数据
const show=()=>{
  axios.post('/api/person/pageList',
  {current:currentPage.value,size:pageSize.value}).then(res=>{
    tableData.value=res.data.list
    total.value=res.data.total
    console.log('--------->>',res.data);
  })
}

//组件加载完执行获取数据的方法
onMounted(()=>{
  show()
})
</script>